<template>
    <div>
        <Modal v-model="isShowModal" :title="title" @on-cancel="hide('formValidate')" :mask-closable="false" fullscreen>

            <Form ref="formValidate" :model="params" :rules="ruleValidate" label-position="top">
                <Alert show-icon closable>
                    1.“退款支付金额”输入的退款支付金额必须是正数，输入多少退多少，输入的金额不能大于支付的金额；<br>
                    2.“退款用户余额”输入的退款用户余额必须是正数，输入多少退多少，输入的余额不能大于抵扣的余额；
                </Alert>
                <FormItem label="退款支付金额：" prop="refundAmount">
                    <Input v-model.trim="params.refundAmount" type="number" placeholder="请输入退款支付金额"></Input>
                </FormItem>
                <FormItem label="退款用户余额：" prop="refundBalance">
                    <Input v-model.trim="params.refundBalance" type="number" placeholder="请输入退款用户余额"></Input>
                </FormItem>
                <FormItem label="退款备注：" prop="remark">
                    <Input v-model.trim="params.remark" type="textarea" placeholder="请输入退款备注"></Input>
                </FormItem>
                 <!--表格数据-->
            <Table :columns="columns" :data="data" size="small" :stripe="true" :loading="isTableLoading" :max-height="510">
                 <template slot-scope="{ row, index }" slot="payAmount">
                    <span>{{row.payAmount ? row.payAmount : '-'}}</span>
                </template>
                <template slot-scope="{ row, index }" slot="balanceDeduction">
                    <span>{{row.balanceDeduction ? row.balanceDeduction : '-'}}</span>
                </template>
                <template slot-scope="{ row, index }" slot="refundBalance">
                    <span>{{row.refundBalance ? row.refundBalance : '-'}}</span>
                </template>
                <template slot-scope="{ row, index }" slot="remainBalance">
                    <span>{{row.remainBalance ? row.remainBalance : '-'}}</span>
                </template>
                <template slot-scope="{ row, index }" slot="refundAmount">
                    <span>{{row.refundAmount ? row.refundAmount : '-'}}</span>
                </template>
                <template slot-scope="{ row, index }" slot="remainAmount">
                    <span>{{row.remainAmount ? row.remainAmount : '-'}}</span>
                </template>
                <template slot-scope="{ row, index }" slot="remark">
                    <span>{{row.remark ? row.remark : '-'}}</span>
                </template>
            </Table>
            </Form>

            <!-- 重写对话框底部按钮 -->
            <div slot="footer">
                <Button @click="hide('formValidate')">取消</Button>
                <Button v-if="type != 1" type="primary" @click="handleSubmit('formValidate')" :loading="loadingBtn">
                    <span v-if="!loadingBtn">确定</span>
                    <span v-else>请稍候...</span>
                </Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                isShowModal: false,
                loadingBtn: false,
                title: '查看信息',
                type: 0,
                isTableLoading: false,
                params: {
                    mallOrderId: '',
                    refundAmount: '',
                    refundBalance: '',
                    remark: ''
                },
                ruleValidate: {},
                // 表格列
                columns: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'ID',
                        minWidth: 120,
                        key: 'afterRefundId'
                    },
                    {
                        title: '订单总额（元）',
                        minWidth: 120,
                        key: 'totalAmount'
                    },
                    {
                        title: '支付金额（元）',
                        minWidth: 120,
                        slot: 'payAmount'
                    },
                    {
                        title: '余额抵扣（元）',
                        minWidth: 120,
                        slot: 'balanceDeduction'
                    },
                    {
                        title: '退款余额（元）',
                        minWidth: 120,
                        slot: 'refundBalance'
                    },
                    {
                        title: '剩余可退余额（元）',
                        minWidth: 180,
                        slot: 'remainBalance'
                    },
                    {
                        title: '退款金额（元）',
                        minWidth: 120,
                        slot: 'refundAmount'
                    },
                    {
                        title: '剩余可退金额（元）',
                        minWidth: 180,
                        slot: 'remainAmount'
                    },
                    {
                        title: '退款备注',
                        minWidth: 220,
                        slot: 'remark'
                    },
                    {
                        title: '操作人',
                        minWidth: 120,
                        key: 'operatorName'
                    },
                    {
                        title: '创建时间',
                        width: 150,
                        key: 'createTime'
                    }
                ],
                // 表格数据
                data: [],
                amountDes:'',
                balanceDes:''
            }
        },
        methods: {
            // 点击提交验证
            handleSubmit(name) {
                // console.log(this.params);
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        // this.$Message.error('验证通过');
                        /**
                         * type判断
                         * 1.查看 2.新增 3.编辑
                         */
                        switch (this.type) {
                            case 1:
                                // this.title = '查看退款';
                                break;
                            case 2:
                                // 新增退款
                                // this.addAdmin();
                                break;
                            case 3:
                                // 编辑退款
                                this.mallOrderAfterRefund();
                                break;
                            default:
                                this.$Notice.error({
                                    title: '退款管理',
                                    desc: '查看，新增，编辑区分判断报错',
                                    duration: 0
                                });
                                break
                        }
                    } else {
                        this.$Message.error('还有信息没有填写合格哦~');
                    }
                })
            },
            // 显示模态框
            show(row, type) {
                this.isShowModal = true;
                this.type = type;
                /**
                 * type判断
                 * 1.查看 2.新增 3.编辑
                 */
                switch (type) {
                    case 1:
                        this.title = '查看退款';
                        // this.findAdminUserById(row);
                        break;
                    case 2:
                        this.title = '新增退款';
                        break;
                    case 3:
                        this.title = '编辑用户退款';
                        // this.findAdminUserById(row);
                        // console.log(row)
                        this.params.mallOrderId = row.mallOrderId;
                        // 查询自定义退款列表
                        this.findAfterRefundList();
                        break;
                    default:
                        this.$Notice.error({
                            title: '退款管理',
                            desc: '查看，新增，编辑模态框报错',
                            duration: 0
                        });
                        break
                }
            },
            // 编辑退款
            mallOrderAfterRefund(){
                this.$Spin.show();
                this.axios.post('/orderMall/mallOrderAfterRefund', this.params).then(res => {
                    console.log(res);
                    setTimeout(()=>{
                        this.$Spin.hide();
                    },300);
                    if (res.status == 200) {
                        this.$emit('changeDate');
                        this.$Message.success('操作成功.');
                        this.hide('formValidate');
                    }
                    if(res.status == 201){
                        this.$Message.error(res.msg);
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '编辑退款接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 查询自定义退款列表
            findAfterRefundList(){
                this.isTableLoading = true;
                this.axios.post('/orderMall/findAfterRefundList', this.params).then(res => {
                    console.log(res);
                     setTimeout(()=>{
                        this.isTableLoading = false;
                    },300);
                    if (res.status == 200) {
                        this.data = res.data;
                    }
                    if(res.status == 201){
                        this.$Message.error(res.msg);
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '查询退款列表接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 关闭模态框
            hide(name) {
                this.isShowModal = false;
                this.$refs[name].resetFields();
            }
        }
    }
</script>

<style scoped>

</style>